<template>
    <div class="base">
        <div class="top-box">
            <div class="hint-info">
                <img src="../../assets/img/trophies-line.png" alt="">
                <div class="text"><span class="green">西安</span> <span>第18期麻将邀请赛</span></div>
            </div>
            <div class="result-info">
                <img src="../../assets/img/tuoyuan2.png" alt="">
                <div class="result-body">
                    <p class="title">本届比赛结果 ：</p>
                    <div class="result-content">
                        <div class="content-left">
                            <div class="icon"></div>
                            <div class="content-text">
                                <p class="ranking-text">TOP 1</p>
                                <p class="ranking-name">秋棠</p>
                            </div>
                        </div>
                        <div class="content-right">
                            <div class="icon"></div>
                            <div class="content-text">
                                <p class="ranking-text">TOP 2</p>
                                <p class="ranking-name">AAA张立功业</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="award-info">
                <img src="../../assets/img/tuoyuan2.png" alt="">
                <div class="award-body">
                    <div class="award-content">
                        <p class="title">比赛奖励：</p>
                        <p>冠军<span class="green">秋棠</span>获 <span class="orange">300元</span>代金券！！！</p>
                        <p>亚军<span class="green">AAA张立功业...</span>获 <span class="orange">100元</span>代金券！！！</p>
                    </div>
                </div>

            </div>
            <div class="btn-info">
                <van-button class="btn" :round="true" color="#1E9858">修改</van-button>
                <van-button class="btn" :round="true" color="#1E9858">保存</van-button>
                <van-button class="btn" :round="true" color="#1E9858">发布</van-button>
            </div>
        </div>
        <div class="bottom-box">
            <div class="plan-info">
                <img src="../../assets/img/plan.png" alt="">
            </div>
            <div class="plan-text-info">
                <div class="info-left">
                    <img src="../../assets/img/tuoyuan2.png" alt="">
                    <p>第18期4桌</p>
                </div>
                <div class="info-right">
                    <p class="text-bg">19月20日</p>
                    <p class="text-bg">周三</p>
                </div>
            </div>
            <div class="plan-text-info">
                <div class="info-left">
                    <img src="../../assets/img/tuoyuan2.png" alt="">
                    <p>第19期8桌</p>
                </div>
                <div class="info-right">
                    <p class="text-bg">19月20日</p>
                    <p class="text-bg">周三</p>
                </div>
            </div>
            <div class="plan-text-info">
                <div class="info-left">
                    <img src="../../assets/img/tuoyuan2.png" alt="">
                    <p>第20期16桌</p>
                </div>
                <div class="info-right">
                    <p class="text-bg">19月20日</p>
                    <p class="text-bg">周三</p>
                </div>
            </div>
            <div class="btn-info">
                <van-button class="btn" :round="true" color="#1E9858">修改</van-button>
                <van-button class="btn" :round="true" color="#1E9858">保存</van-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    activated() {
    },
    created() {

    },
    mounted() {
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.base {
    background-color: #f3f0f6;
    height: 100%;
    padding: 0 0.6rem;
    font-size: 0.35rem;
    font-weight: 700;
    line-height: 2;

    .green {
        color: #1E9858;
    }

    .orange {
        color: #FF9B19;
    }

    .top-box {
        padding: 0.5rem 0.4375rem;
        background-color: #fff;

        .hint-info {
            position: relative;
            margin: .4375rem 0;
            text-align: center;

            img {
                max-height: 0.9rem;
            }

            .text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-40%, -50%);
            }
        }

        .result-info,
        .award-info {
            display: flex;
            justify-content: start;
            align-items: start;

            img {
                width: 0.375rem;
                margin: 0.13rem;
            }

            .result-body,
            .award-body {
                flex: 1;

                .text {
                    font-size: 0.35rem;
                }

                .result-content {
                    display: flex;
                    justify-content: space-around;
                    align-items: end;
                    padding: 0.5rem 0;

                    .content-left {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .icon {
                            position: relative;
                            width: 2.5rem;
                            height: 2.55rem;
                            background: linear-gradient(148deg, #F6D56E 0%, #FEFDAD 47%, #F8EE81 100%);
                            border-radius: 30px;
                            text-align: center;
                            border: 2px solid #DDCA8D;
                        }

                        .icon::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.9rem solid transparent;
                            border-right: 0.9rem solid transparent;
                            border-bottom: 0.3rem solid #DDCA8D;
                        }

                        .icon::after {
                            content: '';
                            position: absolute;
                            bottom: -2px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.9rem solid transparent;
                            border-right: 0.9rem solid transparent;
                            border-bottom: 0.3rem solid #fff;
                        }

                        .content-text {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            text-align: center;
                            font-size: 0.5rem;
                            font-weight: 400;
                            line-height: 1.5;

                            p {
                                padding: 0 0.125rem;
                            }

                            .ranking-text {
                                background: linear-gradient(0deg, #E9B15F 0%, #DB512D 100%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }

                            .ranking-name {
                                color: #000000;
                                font-size: .325rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }

                    }

                    .content-right {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .icon {
                            position: relative;
                            width: 1.975rem;
                            height: 2.025rem;
                            background: linear-gradient(148deg, #C2EEFB 0%, #E7F6FD 47%, #D2E3EA 100%);
                            border-radius: 30px;
                            text-align: center;
                            border: 2px solid #C2E0FF;
                        }

                        .icon::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.7rem solid transparent;
                            border-right: 0.7rem solid transparent;
                            border-bottom: 0.2rem solid #C2E0FF;
                        }

                        .icon::after {
                            content: '';
                            position: absolute;
                            bottom: -2px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.7rem solid transparent;
                            border-right: 0.7rem solid transparent;
                            border-bottom: 0.2rem solid #fff;
                        }

                        .content-text {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            text-align: center;
                            font-size: 0.4rem;
                            font-weight: 400;
                            line-height: 1.5;

                            p {
                                padding: 0 0.125rem;
                            }

                            .ranking-text {
                                background: linear-gradient(0deg, #85B7DE 0%, #5F91F5 100%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }

                            .ranking-name {
                                color: #000000;
                                font-size: 0.25rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }

                .award-content {
                    font-size: 0.325rem;
                }
            }
        }

        .btn-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.6rem;

            .btn {
                width: 1.875rem;
                font-size: 0.325rem;
            }

            .btn+.btn {
                margin-left: 0.875rem;
            }
        }
    }

    .bottom-box {
        padding: 0.5rem 0.4375rem;
        background-color: #fff;

        img {
            max-height: 1rem;
        }

        .plan-info {
            text-align: center;
        }

        .plan-text-info {
            margin: 0.25rem 0;
            display: flex;
            justify-content: start;
            align-items: center;

            img {
                width: 0.375rem;
                margin: 0.13rem;
            }

            .info-left {
                flex: 4;
                display: flex;
                justify-content: start;
                align-items: center;
            }

            .info-right {
                flex: 6;
                display: flex;
                justify-content: start;
                align-items: center;
            }

            .text-bg {
                background-color: #ddf0e6;
                padding: 0 0.225rem;
                margin-right: 0.575rem;
            }
        }

        .btn-info {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0.6rem;

            .btn {
                width: 1.875rem;
                font-size: 0.325rem;
            }

            .btn+.btn {
                margin-left: 0.875rem;
            }
        }
    }
}
</style>